<template>
  <div class="layout layout-100">
    <Layout class="layout-100">
      <Header class="header-cont main__title--top">{{this.$route.params.name}}</Header>
      <Content class="content-cont">
        <div class="button-s">
          <Button type="primary" @click="issuePassBtn(1)">{{this.$route.params.type ==='issue'?'签发':'审核'}}通过</Button>
          <Button type="error" @click="issuePassBtn(2)">{{this.$route.params.type ==='issue'?'签发':'审核'}}驳回</Button>
        </div>
        <Tabs value="1" @on-click="tabpaneBtn">
          <TabPane label="Ⅰ级风险" name="1" v-if="personType===1 || personType===2 || personType===3">
          </TabPane>
          <TabPane label="Ⅱ级风险" name="2" v-if="personType===1 || personType===2 || personType===3">
          </TabPane>
          <TabPane label="Ⅲ级风险" name="3" v-if="personType===2 || personType===3">
          </TabPane>
          <TabPane label="Ⅳ级风险" name="4" v-if="personType===3">
          </TabPane>
        </Tabs>
        <Table
          border
          ref="selection"
          :columns="columns"
          :data="allList"
          @on-select-cancel="selectCheckboxFalse"
          @on-select-all-cancel="allSelectCheckboxFalse"
          @on-selection-change="selectChangeRiado">
          <template slot-scope="{ row, index }" slot="action">
                  <span
                    title="详情"
                    class="button-class"
                    type="text"
                    @click="destroyBtn(row)" >详情</span>
          </template>
          <template slot-scope="{ row, index }" slot="status">
            <span style="color: blue" v-if="row.statusData == 1">通过</span>
            <span style="color: red" v-if="row.statusData == 2">驳回</span>
          </template>
        </Table>
      </Content>
      <Footer class="footer-cont" >
        <Button type="primary" @click="saveSubmit()">保存</Button>
        <Button @click="closetab">取消</Button>
      </Footer>
    </Layout>
    <Modal
      v-model="destroyModal"
      :mask-closable="false"
      :title="$route.params.type ==='issue'?'签发':'审核'">
      <Form  :show-message="false" :label-width="80">
        <FormItem :label="$route.params.type ==='issue'?'签发说明':'审核说明'" prop="formData.description" property="true" :required="true">
          <Input
            v-model="formData.comment"
            type="textarea"
            :autosize="{minRows: 5,maxRows: 5}"
            placeholder="请输入说明"></Input>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="primary"  @click="saveModal">确定</Button>
        <Button type="text"  @click="destroyModal=false">取消</Button>
      </div>
    </Modal>
    <Modal
      v-model="detailModal2"
      width="80%"
      class="modal"
      :footer-hide="true"
      title="详情">
      <div class="modal-content">
        <Tabs value="0" >
          <TabPane label="风险信息" name="0">
            <Form :show-message="false" label-position="top" >
              <Row >
                <Col span="12">
                  <FormItem label="公司名称">
                    <Input class="width90" v-model.trim="detailData.orgName" readonly/>
                  </FormItem>
                </Col>
                <Col span="12">
                  <FormItem label="项目名称" >
                    <Input class="width90" v-model.trim="detailData.proName" readonly/>
                  </FormItem>
                </Col>
                <Col span="12">
                  <FormItem label="工点名称">
                    <Input class="width90" v-model.trim="detailData.pointName" readonly/>
                  </FormItem>
                </Col>
                <Col span="12">
                  <FormItem label="工点风险等级">
                    <Input class="width90" v-model.trim="detailData.distRiskGradeName"  readonly/>
                  </FormItem>
                </Col>
                <Col span="12">
                  <FormItem label="起始时间">
                    <Input class="width90" v-model.trim="detailData.startTime" readonly/>
                  </FormItem>
                </Col>
                <Col span="12">
                  <FormItem label="结束时间">
                    <Input class="width90" v-model.trim="detailData.endTime" readonly/>
                  </FormItem>
                </Col>
                <Col span="12">
                  <FormItem label="当月是否作业">
                    <Input class="width90" v-model.trim="detailData.isWorkedThisMonth" readonly/>
                  </FormItem>
                </Col>
                <Col span="24">
                  <FormItem label="工点描述">
                    <Input style="width: 95%" type="textarea" v-model.trim="detailData.note" readonly/>
                  </FormItem>
                </Col>
                <Col span="12">
                  <FormItem label="作业风险名称">
                    <Input class="width90" v-model.trim="detailData.riskOperationName"  readonly/>
                  </FormItem>
                </Col>
                <Col span="12">
                  <FormItem label="作业风险类型">
                    <Input class="width90" v-model.trim="detailData.riskCategoryNames" readonly/>
                  </FormItem>
                </Col>
                <Col span="12">
                  <FormItem label="作业风险等级">
                    <Input class="width90" v-model.trim="detailData.riskLevelName" readonly/>
                  </FormItem>
                </Col>
                <Col span="12">
                  <FormItem label="分级方法">
                    <Input class="width90" v-model.trim="detailData.classificationMethodName" readonly/>
                  </FormItem>
                </Col>
                <Col span="24">
                  <FormItem label="具体风险描述">
                    <Input style="width: 95%" type="textarea" v-model.trim="detailData.riskDescription" readonly/>
                  </FormItem>
                </Col>
                <Col span="24">
                  <FormItem label="工程公司管控要求">
                    <Input style="width: 95%" type="textarea" v-model.trim="detailData.riskControlRequirementOne" readonly/>
                  </FormItem>
                </Col>
                <Col span="24">
                  <FormItem label="集团公司管控要求">
                    <Input style="width: 95%" type="textarea" v-model.trim="detailData.riskControlRequirementTwo" readonly/>
                  </FormItem>
                </Col>
                <Col span="24">
                  <FormItem label="目前该风险安全控制情况">
                    <Input style="width: 95%" type="textarea" v-model.trim="detailData.riskControlDetailOne" readonly/>
                  </FormItem>
                </Col>
              </Row>
            </Form>
          </TabPane>
          <TabPane label="方案信息" name="1">
            <Table
              border
              ref="selection"
              :columns="columns2"
              :data="measuresList"
            >
            </Table>
          </TabPane>
          <TabPane label="审核进度" name="2">
            <Timeline>
              <!--<div class="process-recent">{{ processModel.yourMessage }}</div>-->
              <Timeline>
                <TimelineItem
                  color="blue"
                  v-for="(item, index) in recordList"
                  :key="index"
                >
                  <Icon type="ios-radio-button-on" slot="dot" />
                  <div class="process-container">
                    <h4 class="process-title">
                      {{ item.titleName }}：<span
                      :class="'通过' == item.result ? 'audit--success' : 'audit--danger'"
                    >{{ item.result }}</span
                    >
                    </h4>
                    <div class="process-list">
                      <Row
                        :gutter="32"
                        type="flex"
                        v-for="(row, innerIndex) in item.recordList"
                        :key="innerIndex"
                      >
                        <Col :md="8" :lg="5" :xl="4" :xxl="3">
                          <span class="process-name">{{ row.operatorName }}</span>
                          <span class="process-position" v-if="row.operatorPost">
                      （{{ row.operatorPost }}）
                    </span>
                        </Col>
                        <Col>
                          于
                        </Col>
                        <Col>
                          <strong>{{ row.operationTime }}</strong>
                        </Col>
                        <Col>
                          <span v-if="index > 0">进行</span>
                          <strong>{{ row.serviceTypeName }}</strong>
                        </Col>
                        <Col>
                          {{ row.serviceTypeName }}<strong
                          :class="
                        1 == row.operationResult ? 'audit--success' : 'audit--danger'
                      "
                        >{{ row.operationResultName }}</strong
                        >
                        </Col>
                        <Col v-if="index > 0"
                        >并填写说明：<span>{{ row.comment }}</span>
                        </Col>
                      </Row>
                    </div>
                    <div class="process-angle"></div>
                  </div>
                </TimelineItem>
              </Timeline>
            </Timeline>
          </TabPane>
          <TabPane label="问询回复" name="3">
            <replyInquiries v-if="isReply" :editModel="detailData" :businessType="businessType"></replyInquiries>
          </TabPane>
        </Tabs>
      </div>
      <div slot="footer">
        <Button type="text" size="large" @click="detailModal2=false">取消</Button>
      </div>
    </Modal>
    <Modal v-model="isInquiries" title="业务问询" width="50%" ok-text="提交" :footer-hide="true">
      <div class="modal-content">
        <inquiries ref="isInquiriesBox" :checkedRows="checkedRows" :businessType="businessType" @modelBox="modelBox" @person="person"></inquiries>
      </div>
    </Modal>
    <Modal v-model="personModel" title="选择人" width="80%" ok-text="提交" :footer-hide="true">
      <div class="modal-content">
        <checkPerson @personBox="personBox"></checkPerson>
      </div>
    </Modal>
    <span class="inquiries" @click="replyChild()">问询</span>
  </div>
</template>

<script>
import inquiries from '../../components/modules/inquiries/index'
import checkPerson from '../../components/modules/inquiries/checkPerson'
import replyInquiries from '../../components/modules/inquiries/replyInquiries'
  import { mapMutations } from 'vuex'
  export default {
    components:{
      inquiries,
      checkPerson,
      replyInquiries
    },
    data(){
      return {
        personType:JSON.parse(localStorage.getItem('personType')),
        indexNum:'1',
        destroyModal:false,
        detailModal2:false,
        type:'',
        detailData:[],
        recordList:[],
        measuresList:[],
        deleteList:[],
        deleteList5:[],//切换tab 赋值
        deleteList6:[],//切换tab 赋值
        allList:[],
        coutList:[],
        oneList:[],
        twoList:[],
        threeList:[],
        fourList:[],
        processModel: {},
        formData:{
          comment:'',
          approvalPassList:[],
          approvalRejectList:[],
        },
        columns:[
           {
             type: 'selection',
             width: 60,
             align: 'center'
           },
          {
            title: '序号',
            type: 'index',
            align: 'center',
            width: 70
          },
          {
            title: '工点名称',
            key: 'pointName',
            align: 'center',
            tooltip:true,
            width: 150,
          },
          {
            title: '开始时间',
            key: 'startTime',
            align: 'center',
            width: 130,
          },{
            title: '结束时间',
            key: 'endTime',
            align: 'center',
            width: 130,
          },{
            title: '当月是否在施',
            key: 'isWorkedThisMonth',
            align: 'center',
            width: 100,
          },{
            title: '作业风险类型',
            key:'riskCategoryNames',
            tooltip:true,
            align: 'center',
          },{
            title: '作业风险名称',
            key:'riskOperationName',
            tooltip:true,
            align: 'center',
          },{
            title: '作业风险等级',
            key:'riskLevelName',
            align: 'center',
          },{
            title: '方案总数',
            key:'measuresCnt',
            align: 'center',
          },{
            title: this.$route.params.type ==='issue'?'签发状态':'审核状态',
            align: 'center',
            width:100,
            slot:'status',
          },{
            title: '操作',
            width: 100,
            align: 'center',
            slot: 'action'
          }
        ],
        columns2:[
          {
             type: 'selection',
             width: 60,
             align: 'center'
           },
          {
            title: '序号',
            type: 'index',
            align: 'center',
            width: 70
          },
          {
            title: '管控措施',
            key: 'measures',
            align: 'center',
            width:150,
          },
          {
            title: '项目部管控责任人',
            key: 'projectManagementDepartmentName',
            align: 'center',
            width: 100,
          },{
            title: '项目部分管领导',
            key: 'projectManagementLeaderName',
            align: 'center',
            width: 100,
          },{
            title: '项目部主管领导',
            key: 'leaderInChargeOfProjectDepartmentName',
            align: 'center',
            width: 100,
          },{
            title: '工程公司管理人员',
            key:'controlDepartmentOfEngineeringCompanyName',
            align: 'center',
            width: 100,
          },{
            title: '工程公司分管领导',
            key:'leaderInChargeOfEngineeringCompanyName',
            align: 'center',
            width: 100,
          },{
            title: '集团公司管理人员',
            key:'groupCompanyControlDepartmentName',
            align: 'center',
            width: 100,
          },{
            title: '集团公司分管领导',
            key:'leaderInChargeOfGroupCompanyName',
            align: 'center',
            width: 100,
          },{
            title: '措施类型',
            key:'measureTypeName',
            align: 'center',
            width:100,
          },{
            title: '频次',
            key:'frequencyName',
            align: 'center',
          }
        ],
        checkedRows:[],
        businessType:'businesstype_dynamics',
        isInquiries:false,
        personModel:false,
        isReply:false
      }
    },
    methods:{
      // 唤醒问询窗口
      replyChild(){
         if(this.checkedRows.length > 5){
          this.$Message.warning('最多可选5条风险进行批量问询')
          return 
        }else if(this.checkedRows.length == 0){
            this.$Message.warning('请先选择需要问询的风险')
            return
        }else{
          this.isInquiries = true
          this.$refs.isInquiriesBox.isModel()
        }
      },
      // 关闭问询框
      modelBox(){
        this.isInquiries = false
      },
      // 打开人员选择框
      person(){
        this.personModel = true
      },
      // 关闭人员选择框
      personBox(){
        this.personModel = false
      },
      ...mapMutations([
        'closeTag'
      ]),
      closetab () {
        this.closeTag({
          name: this.$route.name,
          params: {...this.$route.params},
          query:{...this.$route.query}
        });
        this.$router.push({path:'/dynamic-control/monthly-dynamics'})
      },
      getDynamicRiskOrderoperation(){//信息--列表
        this.$api.MonthlyDynamics.getDynamicRiskOrderoperation(this.$route.params.id).then(res => {
          if(res.code === 200){
            if(res.data){
              this.oneList = res.data.one;
              this.twoList = res.data.two;
              this.threeList = res.data.three;
              this.fourList = res.data.four;
              if(this.oneList.length>0){
                this.oneList.map(val => {
                  val.startTime = this.$time(
                    new Date(val.startTime),
                    'yyyy-MM-dd'
                  )
                  val.endTime = this.$time(
                    new Date(val.endTime),
                    'yyyy-MM-dd'
                  )
                })
              }
              if(this.twoList.length>0){
                this.twoList.map(val => {
                  val.startTime = this.$time(
                    new Date(val.startTime),
                    'yyyy-MM-dd'
                  )
                  val.endTime = this.$time(
                    new Date(val.endTime),
                    'yyyy-MM-dd'
                  )
                })
              }
              if(this.threeList.length>0){
                this.threeList.map(val => {
                  val.startTime = this.$time(
                    new Date(val.startTime),
                    'yyyy-MM-dd'
                  )
                  val.endTime = this.$time(
                    new Date(val.endTime),
                    'yyyy-MM-dd'
                  )
                })
              }
              if(this.fourList.length>0){
                this.fourList.map(val => {
                  val.startTime = this.$time(
                    new Date(val.startTime),
                    'yyyy-MM-dd'
                  )
                  val.endTime = this.$time(
                    new Date(val.endTime),
                    'yyyy-MM-dd'
                  )
                })
              }
              this.allList = this.oneList;
              if(this.personType === 3){
                this.coutList = this.oneList.concat(this.twoList).concat(this.threeList).concat(this.fourList)
              }else if(this.personType === 2){
                this.coutList = this.oneList.concat(this.twoList).concat(this.threeList)
              }else {
                this.coutList = this.oneList.concat(this.twoList)
              }
            }
          }else {
            this.$Message.warning(res.message)
          }
        })
      },
      destroyBtn(row){//详情
        this.detailModal2 = true;
        this.$api.MonthlyDynamics.getDynamicRiskOrderdetailsecond(row.riskOrderId).then(res => {
          if(res.code === 200){
            this.isReply = true
            this.detailData = res.data;
            this.detailData.startTime = this.$time(
              new Date(this.detailData.startTime),
              'yyyy-MM-dd'
            );
            this.detailData.endTime = this.$time(
              new Date(this.detailData.endTime),
              'yyyy-MM-dd'
            )
            this.measuresList = res.data.measuresList;
            this.recordList = res.data.recordList;
            if(this.recordList){
              this.recordList.map(value => {
                value.operationTime = this.$time(
                  new Date(value.operationTime),
                  'yyyy-MM-dd hh:mm:ss'
                )
              })
            }
          }else {
            this.$Message.warning(res.message)
          }
        })
      },
      getDynamicRiskOrderoperate(){
        let isTrue = false;
        this.coutList.forEach(value => {
          if(!value._disabled){
            isTrue = true;
          }
        })
        if(isTrue){
          this.$Message.warning("您还有未处理通过或者驳回的数据");
          return;
        }
        let riskOrderIdList = [];
        this.coutList.map(val => {
          riskOrderIdList.push(val.riskOrderId)
        })
        let params = {
          approvalType:this.$route.query.isIssue,//审批类型(1:审核,2:签发),
          proName:this.$route.query.proName,
          riskOrderListName:this.$route.query.dynamicRiskOrderListName,
          approvalPassList:this.formData.approvalPassList,//通过
          approvalRejectList:this.formData.approvalRejectList,//驳回
          riskOrderIdList:riskOrderIdList,
        }
        this.$api.MonthlyDynamics.getDynamicRiskOrderoperate(params).then(res => {
          if(res.code === 200){
            this.$Message.success(res.message);
            this.closetab()
          }else {
            this.$Message.warning(res.message)
          }
        })
      },
      issuePassBtn(type){//签发通过/驳回
        if(this.deleteList.length<=0){
          this.$Message.warning("请选择内容");
          return;
        }
        this.destroyModal = true;
        this.type = type;
        this.formData.comment = '';
      },
     /* setData(list,type){
        list.map(val => {
          this.$set(val, '_checked', false);
          this.$set(val, 'random', +new Date());
          this.deleteList.map(val2 => {
            if(val.riskOrderId === val2.riskOrderId && !val.statusData){
              this.$set(val, 'statusData', type);
              this.$set(val, '_disabled', true);
              this.$set(val2, '_disabled', true);
              this.$set(val2, 'statusData', type);
            }
          })
        })
      },*/
      saveModal(){//保存--通过/驳回
        if(!this.formData.comment){
          this.$Message.warning("请输入说明");
          return;
        }
        this.deleteList5 = [];
        this.deleteList6 = [];
        this.destroyModal = false;
        if (this.type === 1){//通过
          let obj = {
            riskOrderIdList:[]
          };
          this.coutList.map(val => {
            this.$set(val, '_checked', false);
            this.$set(val, 'random', +new Date());
            this.deleteList.map(val2 => {
              if(val.riskOrderId === val2.riskOrderId && !val.statusData){
                this.$set(val, 'statusData', 1);
                this.$set(val, '_disabled', true);
                this.$set(val2, '_disabled', true);
                this.$set(val2, 'statusData', 1);
                obj.comment=this.formData.comment;
                obj.riskOrderIdList.push(val.riskOrderId);
              }
            })
          })
          this.formData.approvalPassList.push(obj);
          this.deleteList5 = this.deleteList;
          this.deleteList = [];
        }if(this.type === 2){//驳回
          let obj = {
            riskOrderIdList:[]
          };
          this.coutList.map(val => {
            this.$set(val, '_checked', false);
            this.$set(val, 'random', +new Date());
            this.deleteList.map(val2 => {
              if(val.riskOrderId === val2.riskOrderId && !val.statusData){
                this.$set(val, 'statusData', 2);
                this.$set(val, '_disabled', true);
                this.$set(val2, '_disabled', true);
                this.$set(val2, 'statusData', 2);
                obj.comment=this.formData.comment;
                obj.riskOrderIdList.push(val.riskOrderId);
              }
            })
          })
          this.formData.approvalRejectList.push(obj);
          this.deleteList6 = this.deleteList;
          this.deleteList = [];
        }
      },
      saveSubmit(){
        if(!this.type){
          this.$Message.warning("请先操作通过或者驳回");
          return;
        }
        this.getDynamicRiskOrderoperate();
      },
      tabpaneBtn(e){//切换
        this.indexNum = e;
        if(this.indexNum === '1'){
          this.allList = this.oneList;
        }else if(this.indexNum === '2'){
          this.allList = this.twoList;
        }else if(this.indexNum === '3'){
          this.allList = this.threeList;
        }else {
          this.allList = this.fourList;
        }
        this.allList.map(val => {//切换时候  回显 选中的--和已经处理过的
          this.$set(val, '_checked', false);
          this.$set(val, 'random', +new Date());
          this.deleteList.map(val2 => {
            if(val.riskOrderId === val2.riskOrderId){
              this.$set(val, '_checked', true);
            }
            if(this.deleteList5.length>0){
              if(val.riskOrderId === val2.riskOrderId){
                this.$set(val, '_checked', true);
                this.$set(val, '_disabled', true);
              }
              //this.setData(this.allList,1);
            }
            if(this.deleteList6.length>0){
              if(val.riskOrderId === val2.riskOrderId){
                this.$set(val, '_checked', true);
                this.$set(val, '_disabled', true);
              }
              //this.setData(this.allList,2);
            }
          })
        })
      },
      //check选
      allSelectCheckboxFalse(){//全部取消
        this.deleteList.forEach((value,index) => {
          this.allList.forEach(item => {
            if(value.riskOrderId === item.riskOrderId){
              this.deleteList.splice(index,1)
            }
          })
        })
      },
      selectCheckboxFalse(e,row){//取消单个
        this.deleteList.forEach((item,index) => {
          if(item.riskOrderId === row.riskOrderId){
            this.deleteList.splice(index,1)
          }
        })
      },
      selectChangeRiado(e) {
        this.checkedRows = e
        e.forEach(val => {
          if(JSON.stringify(this.deleteList).indexOf(JSON.stringify(val))===-1){
            this.deleteList.push(val);
          }
        })
      },
    },
    mounted() {
      this.getDynamicRiskOrderoperation();
    }
  };
</script>

<style lang="scss" scoped>
  .button-s {
    margin-bottom: 15px;
    button {
      margin-right: 15px;
    }
  }
  .width90{
    width: 90%;
  }
</style>

